﻿define([
    'text!../html/setting.html',
    '/fg/js/template.js'
], function (template, templates) {
    new Vue({
        template: template,
        el: '#form-generator-create',
        data: {
            templates: templates,
            Fields: [],
            FieldInfo: null,
            Message: null,
            TemplateInfo: null,
            FieldMoving: null, // 移动中的字段
            title: null,
            description: null,
            dragingObject: null
        },
        methods: {
            editTemplate: function (field) {
                event.preventDefault();
                this.FieldInfo = field;
            },
            setFieldWidth: function (data, width) {
                data.Style = { width: width };
            },
            setDefaultOption: function (data, option) {
                for (var i = 0; i < data.FieldOptions.length; i++) {
                    data.FieldOptions[i].DefaultSelected = false;
                }
                option.DefaultSelected = true;
                data.DefaultSelect = option;
            },
            removeField: function (field) {
                if (this.Fields.length === 1) return;
                this.Fields = _.extend([], _.filter(this.Fields, function (item) { return item.index != field.index }));
            },
            removeOption: function (options, option) {
                var removeIndex = 0;
                for (var i = 0; i < options.length; i++) {
                    if (options[i] == option) {
                        removeIndex = i;
                    }
                }
                options.splice(removeIndex, 1);
            },
            addOption: function (options) {
                options.push({ DisplayText: "", Value: "", DefaultSelected: false });
            },
            sortOptions: function (options, reverse) {
                options = orderBy(options, "DisplayText", reverse);
                for (var i = 0; i < options.length; i++) {
                    options[i].Order = i + 1;
                }
            },
            showOptionValue: function (data, showValue) {
                data.ShowValue = showValue;
                for (var i = 0; i < data.FieldOptions.length; i++) {
                    if (!data.FieldOptions[i].Value) {
                        data.FieldOptions[i].Value = data.FieldOptions[i].DisplayText;
                    }
                }
            },
            dragOver: function (ev) {
                var index = 0;
                for (var i = 0; i < ev.currentTarget.parentNode.children.length; i++) {
                    if (ev.currentTarget === ev.currentTarget.parentNode.children[i]) {
                        index = i;
                        break;
                    }
                }
                this.Fields[index].onDrop = true;
                ev.preventDefault();
            },
            dragLeave: function (ev) {
                var index = 0;
                for (var i = 0; i < ev.currentTarget.parentNode.children.length; i++) {
                    if (ev.currentTarget === ev.currentTarget.parentNode.children[i]) {
                        index = i;
                        break;
                    }
                }
                this.Fields[index].onDrop = false;
                //$scope.$apply();
                ev.preventDefault();
            },
            columnCute: function (field, index) {
                return field.Column || "col-md-12";
            },
            save: function () {
                this.Message = null;
                if (!$.trim(this.title)) {
                    this.Message = "请输入表单的名称";
                    return;
                }

                var fields = _.filter(this.Fields, function (field) {
                    field.Template = null;
                    field.editTemplate = null;
                    return field;
                });

                $.ajax({
                    type: 'POST',
                    url: '/Form/Create',
                    data: {
                        ID: this.ID,
                        Title: this.title,
                        Description: this.description,
                        Fields: fields
                    }
                }).done(function (data) {
                    if (data.Message) {
                        this.Message = data.Message;
                    }
                    else {
                        window.location.href = '/fg/form';
                    }
                });
            },
            templateDrag: function (templateInfo) {
                this.dragingObject = templateInfo;
            },
            templateDrop: function (ev, index, field) {
                ev.preventDefault();
                if (!this.dragingObject.index && this.dragingObject.index !== 0) {
                    this.dragingObject.index = this.Fields.length;
                    this.Fields.splice(index + 1, 0, _.extend({}, this.dragingObject));
                } else {
                    var temp = _.extend({}, field);
                    var vm = this;
                    var fileInfoIndex = _.findIndex(this.Fields, function (field) { return field.index == vm.dragingObject.index });
                    this.Fields.splice(index, 1, _.extend({}, this.dragingObject));
                    this.Fields.splice(fileInfoIndex, 1, temp);
                }
            },
            allowDrop: function (ev) {
                ev.preventDefault();
            }
        },
        created: function () {
            this.Fields = [_.extend({ index: 0 }, this.templates[0])]
        }
    });
});